<template>
  <div>
    <el-card>
      <div class="top">
        <el-input
          v-model="input"
          placeholder="用户名"
          class="input"
          size="small"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getById"
          size="small"
          >查询</el-button
        >
        <el-button @click="clear" size="small">清空</el-button>
      </div>
      <!-- 批量删除和添加 -->
      <div class="middle">
        <el-button type="primary" @click="add" size="small" class="addButton"
          >添加</el-button
        >
        <el-button
          type="danger"
          slot="reference"
          size="small"
          @click="deleteManyUsersOpen"
          :disabled="multipleSelection.length ? false : true"
          >批量删除</el-button
        >
      </div>
      <!-- 列表和分页 -->
      <div class="bottom">
        <el-table
          ref="multipleTable"
          :data="tableData.items"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="selection" width="60"></el-table-column>
          <el-table-column label="序号" width="80" type="index">
          </el-table-column>
          <el-table-column label="角色名称">
            <template v-slot="{ row }">
              <template v-if="row.edit">
                <el-input
                  v-model="row.roleName"
                  class="edit-input"
                  size="small"
                />
                <el-button
                  class="cancel-btn"
                  size="small"
                  type="warning"
                  @click="cancelEdit(row)"
                >
                  取消
                </el-button>
              </template>
              <span v-else>{{ row.roleName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <!-- 分配权限按钮 -->
              <el-button
                type="info"
                icon="el-icon-info"
                size="mini"
                title="分配权限"
                @click="goRoleAuth(row)"
              ></el-button>
              <!-- 对勾按钮 -->
              <el-button
                type="primary"
                icon="el-icon-check"
                size="mini"
                title="确定"
                @click="updateRole(row)"
              ></el-button>
              <!-- 修改按钮 -->
              <el-button
                type="primary"
                icon="el-icon-edit-outline"
                size="mini"
                title="修改角色"
                @click="changeRole(row)"
              ></el-button>
              <!-- 删除按钮 -->
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                title="删除角色"
                @click="open(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout=" prev, pager, next, jumper,->, sizes,total"
          :total="tableData.total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import roleApi from "@/api/acl/role";

export default {
  data() {
    return {
      input: "",
      tableData: {},
      currentPage: 1,
      pageSize: 5,
      drawer: false,
      multipleSelection: [],
      addRole: "",
      originRoleName: "",
    };
  },
  methods: {
    // 点击跳转到分配权限页面
    goRoleAuth(row) {
      this.$router.push(`roleAuth?id=${row.id}&roleName=${row.roleName}`);
    },

    // 点击删除按钮弹窗
    open(row) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.deleteRole(row.id);
          this.getUsers();
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "删除失败",
          });
        });
    },

    //删除角色回调
    async deleteRole(id) {
      await roleApi.removeById(id);
    },

    // 修改输入框的取消按钮
    cancelEdit(row) {
      row.roleName = this.originRoleName;
      console.log(this.originRoleName);
      row.edit = false;
      this.$message.error("取消修改");
    },

    // 点击修改按钮
    changeRole(row) {
      row.edit = true;
      this.originRoleName = row.roleName;
    },

    // 对勾按钮
    async updateRole(row) {
      await roleApi.updateById(row);
      this.$message({
        message: "更新角色成功",
        type: "success",
      });
      this.getUsers();
    },

    // 添加角色确定按钮
    async confirmAdd() {
      try {
        // if (!this.isUpdate) {
        await roleApi.save(this.addRole);
        this.getUsers();
        this.$message({
          message: "添加成功",
          type: "success",
        });
        // } else {
        //   this.confirmUpdateUser();
        // }
      } catch (error) {
        this.$message.error("添加失败");
      }
    },
    // 添加角色弹窗
    add() {
      this.$prompt("请输入新名称", "添加角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.addRole = value;
          this.confirmAdd();
          this.roleApi;
          this.$message({
            type: "success",
            message: "添加成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    // 点击批量删除按钮
    async deleteManyUsers() {
      try {
        await roleApi.removeRoles(this.multipleSelection);
        this.$message({
          message: "删除成功",
          type: "success",
        });
      } catch (error) {
        console.log(456);
        this.$message.error("删除失败");
      }
    },

    // 点击多选框后收集到被点击的那一项
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 批量删除弹出确认框
    deleteManyUsersOpen() {
      this.$confirm("此操作将永久删除这些, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteManyUsers();
          this.getUsers;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 获取用户
    async getUsers() {
      const result = await roleApi.getPageList(
        this.currentPage,
        this.pageSize,
        this.input
      );
      this.tableData = result.data;
    },

    // 搜索回调
    async getById() {
      this.getUsers();
    },

    // 点击清空输入框重新渲染
    clear() {
      this.input = "";
      this.getUsers();
    },

    // 点击切换每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getUsers();
    },

    //点击跳转第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getUsers();
    },
  },

  mounted() {
    this.getUsers();
  },
};
</script>

<style lang="scss" scoped>
.top {
  .input {
    width: 170px;
    margin-right: 50px;
  }
}
.middle {
  margin-top: 30px;
}
.bottom {
  margin-top: 30px;
}
</style>
